// 引入 Count 的 UI 组件
import CountUI from "../../component/Count"

// 引入 connect 用于连接 UI 与 redux 
import {connect} from "react-redux"
import {
    createIncrementAction,
    createDecrementAction,
    createIncrementAsyncAction
} from "../../redux/count_action"



// mapStateToProps 函数返回的是一个对象
// 返回的对象中的 key 就作为传递给 UI 组件 props 的 key , value 就作为传递给 UI 组件 props 的 value 
// mapStateToProps 用于传递状态
function mapStateToProps(state){
    return {count:state}
}
// mapDispatchToProps 函数返回的是一个对象
// 返回的对象中的 key 就作为传递给 UI 组件 props 的 key , value 就作为传递给 UI 组件 props 的 value 
// mapDispatchToProps 用于传递操作状态的方法
function mapDispatchToProps(dispatch){
    return {
        jia:(data)=>dispatch(createIncrementAction(data)),
        jian:(data)=>dispatch(createDecrementAction(data)),
        async:(data,time)=>dispatch(createIncrementAsyncAction(data,time)),
    }
}

// 使用 connect()() 创建并暴露一个 Count 的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)